<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { ChainItem } from '/@/components/ChainItem';
  import { useRouter } from 'vue-router';
  // import { queryCardData } from '/@/api/creator';
  import type { CardDataGetResultModel } from '/@/api/model/creatorModel';
  import { Chart } from '/@/components/Chart';
  import { Card } from '@arco-design/web-vue';

  const router = useRouter();

  const activeKey = ref('');
  watch(
    router.currentRoute,
    ({ path }) => {
      activeKey.value = path;
    },
    { immediate: true },
  );
  watch(activeKey, (key) => {
    if (key !== router.currentRoute.value.path) {
      router.push(key);
    }
  });

  const cardData = ref<CardDataGetResultModel | null>(null);
  (async () => {
    // cardData.value = await queryCardData({
    //   datas: [
    //     'all_follower',
    //     'incr_active_follower',
    //     'incr_do_follower',
    //     'incr_undo_follower',
    //     'incr_follower',
    //   ],
    // });
  })();

  const option = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['展现', '阅读', '点赞'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        name: '展现',
        type: 'line',
        stack: 'Total',
        data: [120, 132, 101, 134, 90, 230, 210],
      },
      {
        name: '阅读',
        type: 'line',
        stack: 'Total',
        data: [220, 182, 191, 234, 290, 330, 310],
      },
      {
        name: '点赞',
        type: 'line',
        stack: 'Total',
        data: [150, 232, 201, 154, 190, 330, 410],
      },
    ],
  };
</script>

<template>
  <div class="flex flex-wrap mb-[14px]">
    <ChainItem title="总关注者" :data="cardData?.all_follower" />
    <ChainItem title="活跃关注者" :data="cardData?.incr_active_follower" />
    <ChainItem title="新增关注者" :data="cardData?.incr_do_follower" />
    <ChainItem title="取消关注" :data="cardData?.incr_undo_follower" />
    <ChainItem title="净增关注" :data="cardData?.incr_follower" />
  </div>
  <Card title="数据趋势" :bordered="false">
    <Chart class="h-[410px]" :option="option" />
  </Card>
</template>
